import React, { PureComponent } from 'react'
import { View, Text, StyleSheet, ScrollView, RefreshControl, TouchableOpacity, ListView, Image, StatusBar, FlatList, ActivityIndicator } from 'react-native'

import Swiper from 'react-native-swiper'
import { PullView } from 'react-native-pull'

import { color, Button, NavigationItem, SpacingView, Separator } from '../../widget'
import { Heading2, Heading3, Paragraph } from '../../widget/Text'
import { screen, system } from '../../common'
import SellGroupItem from './SellGroupItem'
import HorizontalItem from './HorizontalItem'
import VerticalItem from './VerticalItem'

//import api, { testMD5 } from '../../api'
import * as api from '../../api'

type Props = {

}

type State = {
    isRefreshing: boolean,
    advertisingList: Array<Object>,
    recommendProductList: Array<Object>
}

let sliderImgs = [
    'http://bftest.wangjushijie.com/web/userfiles/1/images/wsAdvertising/advertising/2018/01/%E6%9E%973.jpg',
    'http://images3.c-ctrip.com/rk/apph5/C1/201505/app_home_ad49_640_128.png',
    'http://images3.c-ctrip.com/rk/apph5/D1/201506/app_home_ad05_640_128.jpg'
]

let sellGroup = [
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "三星手机",
        "price": 7000
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "三星手机",
        "price": 7000
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "三星手机",
        "price": 7000
    }
]

let dataList1 = [
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "price": 69.00
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "price": 69.00
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "price": 69.00
    }
]

let dataList2 = [
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "buyNum": 10,
        "earn": 4.75,
        "price": 69.00
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "buyNum": 10,
        "earn": 4.75,
        "price": 69.00
    },
    {
        "imageUrl": "http://bftest.wangjushijie.com/web/userImages/aa374f05-a08d-43c8-ae79-7112134fa4b2.jpg",
        "title": "沃橘 果肉鲜嫩",
        "buyNum": 10,
        "earn": 4.75,
        "price": 69.00
    }
]

class TabScene_recommend extends PureComponent<Props, State> {


    constructor(props: Object) {
        super(props)

        this.state = {
            isRefreshing: false,
            advertisingList: [],
            recommendProductList: [[],[],[]]
        }
        //this.requestData()
    }

    pullRefresh() {
        setTimeout(() => {
            this.requestData()
            this.setState({ isRefreshing: false })
        }, 2000)
    }

    componentDidMount() {
        this.requestData()
    }

    requestData = () => {
        this.setState({refreshing:true})
        this.requestAdvertisingList()
        this.requestRecommendProductList()
    }

    requestAdvertisingList = async () => {
        try{
            var parameter = {}
            var list = await api.getAdvertisingList(parameter)

            this.setState({
                advertisingList:list
            })
        }catch(error){
            alert('请求失败，请重试' + error)
        }
    }

    requestRecommendProductList = async () => {
        try{
            var parameter = {}
            var list = await api.getRecommendProductList(parameter)
            
            this.setState({
                recommendProductList: list
            })
        }catch(error){
            alert('请求失败，请重试' + error)
        }
    }

    render() {
        return (
            <View style={styles.container}>
                <ScrollView
                    refreshControl={
                        <RefreshControl
                            refreshing={this.state.isRefreshing}
                            onRefresh={() => this.requestData()}
                            tintColor='gray'
                        />
                    }>
                    <Swiper style={styles.sliderImg}>
                        {this.state.advertisingList.map((img, i) => (
                            <TouchableOpacity style={styles.sliderImg} key={i}>
                                <Image style={styles.sliderImg} resizeMode='cover' source={{ uri: img }} />
                            </TouchableOpacity>
                        ))}
                    </Swiper>

                    <TouchableOpacity style={styles.notice}>
                        <Image source={require('../../img/home/icon_homepage_ktv_category.png')} style={styles.notice_img} />
                        <Text style={styles.notice_text}>展示活动、通知类消息</Text>
                    </TouchableOpacity>

                    <TouchableOpacity>
                        <View style={styles.subTitle}>
                            <Paragraph>超值拼团</Paragraph>
                            <View style={{ flex: 1 }} />
                            <Paragraph>更多></Paragraph>
                        </View>
                    </TouchableOpacity>

                    <View style={{ flexDirection: "row", padding: 10, backgroundColor: 'white' }}>
                        {sellGroup.map((item, i) => (
                            <SellGroupItem
                                info={item}
                                key={i}
                            />
                        ))}
                    </View>

                    <Separator />

                    <TouchableOpacity>
                        <View style={styles.subTitle}>
                            <Paragraph>新人推荐></Paragraph>
                        </View>
                    </TouchableOpacity>

                    <View>
                        {this.state.recommendProductList[0].map((item, i) => (
                            <HorizontalItem
                                info={item}
                                key={i}
                            />
                        ))}
                    </View>

                    <Separator />

                    <TouchableOpacity>
                        <View style={styles.subTitle}>
                            <Paragraph>新品推荐></Paragraph>
                        </View>
                    </TouchableOpacity>

                    <View style={styles.VerticalItemContainer}>
                        {this.state.recommendProductList[1].map((item, i) => (
                            <VerticalItem
                                info={item}
                                key={i}
                            />
                        ))}
                    </View>

                    <Separator />

                    <TouchableOpacity>
                        <View style={styles.subTitle}>
                            <Paragraph>热销爆款></Paragraph>
                        </View>
                    </TouchableOpacity>

                    <View style={styles.VerticalItemContainer}>
                        {this.state.recommendProductList[2].map((item, i) => (
                            <VerticalItem
                                info={item}
                                key={i}
                            />
                        ))}
                    </View>
                </ScrollView>
            </View>
        )
    }
}


const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: color.paper
    },
    PullView: {
        width: screen.width,
    },
    sliderImg: {
        width: screen.width,
        height: screen.width / 3,
    },
    notice: {
        flexDirection: 'row',
        padding: 5,
        justifyContent: 'flex-start',
        alignItems: 'center',
        borderBottomWidth: screen.onePixel,
        borderColor: color.border,
        backgroundColor: 'white'
    },
    notice_img: {
        width: 20,
        height: 20,
        margin: 5,
        borderRadius: 5
    },
    notice_text: {
        fontSize: 11
    },
    subTitle: {
        flexDirection: 'row',
        //height: 30,
        width: screen.width,
        alignItems: 'center',
        justifyContent: 'center',
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 15,
        paddingBottom: 15,
        backgroundColor: 'white'
    },
    VerticalItemContainer: {
        flexDirection: 'row',
        flexWrap: 'wrap',
        padding: 10,
        backgroundColor: 'white'
    }
})


export default TabScene_recommend
